<template>
  <div class="attraction-rankings-page">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1 class="page-title">
        <el-icon><Trophy /></el-icon>
        景点排行榜
      </h1>
      <p class="page-subtitle">发现最受欢迎的南昌旅游景点</p>
    </div>

    <!-- 筛选栏 -->
    <el-card class="filter-card" shadow="hover">
      <el-row :gutter="20" align="middle">
        <el-col :span="8">
          <el-select
            v-model="rankingType"
            placeholder="排行榜类型"
            style="width: 100%"
            @change="fetchRankings"
          >
            <el-option label="热门景点" value="hot" />
            <el-option label="评分最高" value="rating" />
            <el-option label="收藏最多" value="favorite" />
            <el-option label="最新添加" value="newest" />
          </el-select>
        </el-col>
        <el-col :span="8">
          <el-select
            v-model="selectedCategory"
            placeholder="全部分类"
            clearable
            style="width: 100%"
            @change="fetchRankings"
          >
            <el-option label="全部" value="" />
            <el-option label="文化古迹" value="cultural" />
            <el-option label="自然风光" value="natural" />
            <el-option label="现代建筑" value="modern" />
            <el-option label="美食购物" value="food" />
          </el-select>
        </el-col>
        <el-col :span="8">
          <el-select
            v-model="period"
            placeholder="时间范围"
            style="width: 100%"
            @change="fetchRankings"
          >
            <el-option label="全部" value="all" />
            <el-option label="今日" value="today" />
            <el-option label="本周" value="week" />
            <el-option label="本月" value="month" />
          </el-select>
        </el-col>
      </el-row>
    </el-card>

    <!-- 排行榜列表 -->
    <div v-loading="loading" class="rankings-container">
      <el-card shadow="hover" class="rankings-card">
        <template #header>
          <div class="card-header">
            <span>{{ getRankingTitle() }}</span>
            <span class="count-text">共 {{ rankings.length }} 个景点</span>
          </div>
        </template>

        <el-table :data="rankings" stripe style="width: 100%">
          <el-table-column type="index" label="排名" width="80" align="center">
            <template #default="{ $index }">
              <div class="rank-badge" :class="getRankClass($index)">
                {{ $index + 1 }}
              </div>
            </template>
          </el-table-column>

          <el-table-column label="景点信息" min-width="300">
            <template #default="{ row }">
              <div class="attraction-info">
                <el-image
                  v-if="row.primary_image"
                  :src="getImageUrl(row.primary_image)"
                  fit="cover"
                  class="attraction-thumb"
                  lazy
                >
                  <template #error>
                    <div class="image-slot">
                      <el-icon><PictureRounded /></el-icon>
                    </div>
                  </template>
                </el-image>
                <div v-else class="no-image-thumb">
                  <el-icon><PictureRounded /></el-icon>
                </div>
                <div class="info-content">
                  <h4 class="attraction-name" @click="viewDetail(row.id)">
                    {{ row.name }}
                  </h4>
                  <div class="attraction-meta">
                    <el-tag :type="getCategoryType(row.category)" size="small">
                      {{ row.category_display }}
                    </el-tag>
                    <span class="meta-item">
                      <el-icon><Location /></el-icon>
                      {{ row.address || '暂无地址' }}
                    </span>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="门票价格" width="120" align="center">
            <template #default="{ row }">
              <span class="price-text">¥{{ row.ticket_price }}</span>
              <el-tag v-if="row.ticket_price == 0" type="success" size="small" style="margin-left: 5px;">
                免费
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column label="评分" width="150" align="center">
            <template #default="{ row }">
              <el-rate
                :model-value="(row.rating || 0) / 1"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}"
                size="small"
              />
            </template>
          </el-table-column>

          <el-table-column
            v-if="rankingType === 'favorite'"
            label="收藏数"
            width="100"
            align="center"
          >
            <template #default="{ row }">
              <span class="count-badge">{{ row.favorite_count || 0 }}</span>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="120" align="center" fixed="right">
            <template #default="{ row }">
              <el-button type="primary" size="small" @click="viewDetail(row.id)">
                查看详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 空状态 -->
        <el-empty
          v-if="!loading && rankings.length === 0"
          description="暂无数据"
          :image-size="150"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Trophy, Location, PictureRounded } from '@element-plus/icons-vue'
import TravelAPI from '../api/travel'
import logger from '../utils/logger'
import { getImageUrl as getImageUrlUtil } from '../utils/apiConfig'

export default {
  name: 'AttractionRankings',
  components: {
    Trophy,
    Location,
    PictureRounded
  },
  setup() {
    const router = useRouter()
    const loading = ref(false)
    const rankings = ref([])
    const rankingType = ref('hot')
    const selectedCategory = ref('')
    const period = ref('all')

    // 获取排行榜标题
    const getRankingTitle = () => {
      const titles = {
        hot: '热门景点排行榜',
        rating: '评分最高排行榜',
        favorite: '收藏最多排行榜',
        newest: '最新添加景点'
      }
      return titles[rankingType.value] || '景点排行榜'
    }

    // 获取景点排行榜
    const fetchRankings = async () => {
      loading.value = true
      try {
        const params = {
          type: rankingType.value,
          category: selectedCategory.value,
          period: period.value,
          limit: 50
        }
        const response = await TravelAPI.getAttractionRankings(params)
        rankings.value = response.results || []
      } catch (error) {
        logger.error('获取排行榜失败:', error)
        ElMessage.error('获取排行榜失败')
      } finally {
        loading.value = false
      }
    }

    // 查看景点详情
    const viewDetail = (id) => {
      router.push(`/attractions/${id}`)
    }

    // 获取排名样式
    const getRankClass = (index) => {
      if (index === 0) return 'rank-gold'
      if (index === 1) return 'rank-silver'
      if (index === 2) return 'rank-bronze'
      return ''
    }

    // 获取图片URL
    const getImageUrl = (url) => {
      return getImageUrlUtil(url)
    }

    // 获取分类类型
    const getCategoryType = (category) => {
      const types = {
        'cultural': 'warning',
        'natural': 'success',
        'modern': 'info',
        'food': 'danger'
      }
      return types[category] || 'info'
    }

    onMounted(() => {
      fetchRankings()
    })

    return {
      loading,
      rankings,
      rankingType,
      selectedCategory,
      period,
      getRankingTitle,
      fetchRankings,
      viewDetail,
      getRankClass,
      getImageUrl,
      getCategoryType
    }
  }
}
</script>

<style scoped>
.attraction-rankings-page {
  /* 南昌旅游特色：天空蓝渐变背景 */
  background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 50%, #90CAF9 100%);
  min-height: 100vh;
  padding: 20px;
  animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.attraction-rankings-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  /* 南昌旅游特色：天空蓝渐变背景 */
  background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 50%, #90CAF9 100%);
  min-height: 100vh;
  animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-header {
  margin-bottom: 20px;
  text-align: center;
}

.page-title {
  font-size: 28px;
  font-weight: 600;
  /* 南昌红主题色 */
  color: #C8102E;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.page-subtitle {
  color: #909399;
  font-size: 14px;
}

.filter-card {
  margin-bottom: 20px;
  border-radius: 12px;
  border: 1px solid rgba(200, 16, 46, 0.1);
  background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(227,242,253,0.8) 100%);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 12px rgba(200, 16, 46, 0.08);
  transition: all 0.3s ease;
}

.filter-card:hover {
  box-shadow: 0 8px 24px rgba(200, 16, 46, 0.16);
  transform: translateY(-2px);
  border-color: rgba(212, 175, 55, 0.3);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
}

.count-text {
  color: #909399;
  font-size: 14px;
  font-weight: normal;
}

.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f5f7fa;
  color: #606266;
  font-weight: 600;
  font-size: 14px;
}

.rank-badge.rank-gold {
  /* 滕王阁金色渐变 */
  background: linear-gradient(135deg, #D4AF37 0%, #F4D03F 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
}

.rank-badge.rank-silver {
  /* 赣江蓝渐变 */
  background: linear-gradient(135deg, #1E88E5 0%, #42A5F5 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(192, 192, 192, 0.4);
}

.rank-badge.rank-bronze {
  /* 自然绿渐变 */
  background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(205, 127, 50, 0.4);
}

.attraction-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.attraction-thumb {
  width: 60px;
  height: 60px;
  border-radius: 6px;
  flex-shrink: 0;
}

.no-image-thumb {
  width: 60px;
  height: 60px;
  border-radius: 6px;
  background: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c0c4cc;
  flex-shrink: 0;
}

.image-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #c0c4cc;
}

.info-content {
  flex: 1;
  min-width: 0;
}

.attraction-name {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  cursor: pointer;
  transition: color 0.3s;
}

.attraction-name:hover {
  /* 南昌红主题色 */
  color: #C8102E;
}

.attraction-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #909399;
  font-size: 12px;
}

.price-text {
  /* 滕王阁金色 */
  color: #D4AF37;
  font-weight: 600;
  font-size: 16px;
}

.count-badge {
  display: inline-block;
  padding: 4px 12px;
  background: #f0f9ff;
  color: #409eff;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
}

.rankings-container {
  margin-top: 20px;
}

.rankings-card {
  border-radius: 12px;
  border: 1px solid rgba(200, 16, 46, 0.1);
  background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(227,242,253,0.8) 100%);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 12px rgba(200, 16, 46, 0.08);
  transition: all 0.3s ease;
}

.rankings-card:hover {
  box-shadow: 0 8px 24px rgba(200, 16, 46, 0.16);
  transform: translateY(-2px);
  border-color: rgba(212, 175, 55, 0.3);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .attraction-info {
    flex-direction: column;
    align-items: flex-start;
  }

  .attraction-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
}
</style>

